<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字幕打印机</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <input type="text" id="messageInput" placeholder="输入要显示的文本内容" onkeydown="handleKeyPress(event)">
    <button id="messageSendButton" onclick="sendMessage()">发送</button>
    <button id="openColorPicker">背景色盘</button>
    <button id="openColorPicker2">文字色盘</button>
    <button id="saveButton" onclick="save_config()">保存配置</button>
    <div>
        <label for="input_fontFamily">文字字体（css中支持的字体，不支持乱输）:</label> 
        <input class="input_config_common" type="text" id="input_fontFamily" placeholder="请输入字体">
        <label for="input_fontSize">字体大小:</label> 
        <input class="input_config_common" type="text" id="input_fontSize" placeholder="请输入字体大小，单位px">
    </div>
    <div>
        <label for="input_single_char_show_time">单个字符显示耗时(ms):</label> 
        <input class="input_config_common" type="text" id="input_single_char_show_time" >

        <label for="input_gradient_show_time">渐变显示耗时(ms):</label> 
        <input class="input_config_common" type="text" id="input_gradient_show_time" >
    </div>
    <div>
        <label for="input_hide_time">隐藏字幕的动画时间(ms):</label>
        <input class="input_config_common" type="text" id="input_hide_time" >
        
        <label for="input_show_over_hide_time">显示完毕多久后隐藏字幕(ms):</label> 
        <input class="input_config_common" type="text" id="input_show_over_hide_time" >
    </div>
    <div class="radio-container">
        <div class="radio-item">
            <label class="radio-label">
                <input type="radio" name="show_mode" value="1" checked>
                <span class="radio-custom"></span>
                渐变显示
            </label>
        </div>
        <div class="radio-item">
            <label class="radio-label">
                <input type="radio" name="show_mode" value="2">
                <span class="radio-custom"></span>
                逐字显示
            </label>
        </div>
    </div>
    <div id="subtitle_bg">
        <div id="subtitle"></div>
    </div>
    <div id="colorPickerContainer">
        <input type="color" id="colorPicker" style="display: none;">
    </div>
    <div id="colorPickerContainer2">
        <input type="color" id="colorPicker2" style="display: none;">
    </div>
    <script src="js/socket.io.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

